<!--
 * @description  :
 * @descriptionDetail:
 * @copyright    : 浙江烟草
 * @author       : mhb
 * @create       : 2023-01-17 11:06:06
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="m-content">
      <view :style="{ width: getContainerWidth(), height: getContainerHeight() }" id="container"></view>
      <view class="cur-loc">
        <u-image :src="require('@/static/market/cur-loc-gree.png')" width="100%" mode="widthFix" @click="toCurrent"></u-image>
      </view>

      <!-- 底部零售户信息 -->
      <u-popup mode="bottom" height="66%" v-model="detailShow" :closeable="true" close-icon-color="#333333" z-index="9999" :safe-area-inset-bottom="true">
        <view class="bottom-main">
          <view class="title">零售户信息</view>
          <u-row gutter="16" align="top" class="divided-line">
            <u-col span="7">
              <view class="msg-title">
                企业字号
              </view>
              <view class="msg-context">
                {{ item.companyName || "/" }}
              </view>
            </u-col>
            <u-col span="5">
              <view class="msg-title">
                经营者
              </view>
              <view class="msg-context">
                {{ item.managerName || "/" }}
              </view>
            </u-col>
          </u-row>
          <u-row gutter="16" align="top" class="divided-line">
            <u-col span="7">
              <view class="msg-title">
                单位
              </view>
              <view class="msg-context">
                {{ item.issueOrgName || "/" }}
              </view>
            </u-col>
            <u-col span="5">
              <view class="msg-title">
                经营状态
              </view>
              <view class="msg-context">
                {{ item.licStatusName || "/" }}
              </view>
            </u-col>
          </u-row>
          <u-row gutter="16" align="top" class="divided-line">
            <u-col span="7">
              <view class="msg-title">
                许可证号
              </view>
              <view class="msg-context">
                {{ item.licNo || "/" }}
              </view>
            </u-col>
            <u-col span="5">
              <view class="msg-title">
                联系电话
              </view>
              <view class="msg-context">
                {{ item.retailTel || "/" }}
              </view>
            </u-col>
          </u-row>
          <u-row gutter="16" align="top">
            <u-col span="12">
              <view class="msg-title">
                经营地址
              </view>
              <view class="msg-context">
                {{ item.businessAddr || "/" }}
              </view>
            </u-col>
          </u-row>
          <u-button class="u-btn" type="primary" @click="handleOk" style="margin-top: 30px">
            确定
          </u-button>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { AMapMixin } from "@/common/AMapMixin.js";
import { SET_MAP_LAT_LON } from "@/config/setting.config.js";
import fabButton from "@/components/uni-fab.vue";
import linkeageService from "@/service/internal/linkeage.service";

export default {
  components: {
    fabButton,
  },
  mixins: [AMapMixin],
  data() {
    return {
      item: {},
      detailShow: false,
    };
  },
  methods: {
    initAmap() {
      let self = this;
      // #ifdef H5-DINGDING || H5-WECHAT
      self.$deviceApi.geolocation().then(
        (res) => {
          self.curPos = [res.longitude, res.latitude];
          self.setMapInstance([res.longitude, res.latitude]);
        },
        (err) => {
          self.justInitMap();
        }
      );
      // #endif
      // #ifdef H5-ONLY
      self.curPos = SET_MAP_LAT_LON;
      self.setMapInstance(SET_MAP_LAT_LON);
      // #endif
    },
    getContainerHeight() {
      let p = this.$u.sys().windowHeight - 44 - this.$u.sys().statusBarHeight + "px";
      // #ifdef H5-DINGDING || H5-WECHAT
      p = this.$u.sys().windowHeight - this.$u.sys().statusBarHeight + "px";
      // #endif
      return p;
    },
    getContainerWidth() {
      return this.$u.sys().windowWidth + "px";
    },
    toCurrent() {
      let self = this;
      // #ifdef H5-DINGDING || H5-WECHAT
      this.$deviceApi.geolocation().then(
        (res) => {
          self.curCords = new AMap.LngLat(res.longitude, res.latitude);
          self.curPos = [res.longitude, res.latitude];
          self.updateCurrentPointMarker();
        },
        (err) => {}
      );
      // #endif
      // #ifdef H5-ONLY
      self.curCords = new AMap.LngLat(SET_MAP_LAT_LON[0], SET_MAP_LAT_LON[1]);
      self.curPos = SET_MAP_LAT_LON;
      self.updateCurrentPointMarker();
      // #endif
    },
    setMapInstance(cords) {
      if (!this.hasInited) return;
      let self = this;
      self.curCords = new AMap.LngLat(cords[0], cords[1]);
      self.amap = new AMap.Map("container", {
        center: self.curCords,
        showControlButton: true,
        zoom: 18,
      });
      self.setCurrentPointMarker();
      this.$modal.hideLoading();
      self.loadPlugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView", "AMap.MapType"], function() {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        self.amap.addControl(new AMap.ToolBar());
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        self.amap.addControl(new AMap.Scale());
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      });
      this.getRetailerList();
    },
    justInitMap() {
      this.$modal.alert("请在设备的设置中开启APP的定位权限后重新获取当前位置");
      this.amap = new AMap.Map("container", {
        showControlButton: true,
        zoom: 18,
      });
      this.$modal.hideLoading();
    },
    // 获取零售户
    getRetailerList() {
      let param = {
        longitude: this.curPos[0],
        latitude: this.curPos[1],
        distanceNum: 0.1,
      };

      linkeageService.getLicPageDistance(param).then((res) => {
        if (res && res.length) {
          this.setMarket(res);
        }
      });
    },
    setMarket(list) {
      let self = this;
      list.forEach((item, V) => {
        let icon = new AMap.Icon({
          size: new AMap.Size(24, 30), // 图标尺寸
          image: require(`@/static/market/custom.png`),
          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
        });
        let marker = new AMap.Marker({
          position: [item.longitude, item.latitude],
          icon: icon,
          offset: new AMap.Pixel(-9, -30),
          // 设置是否可以拖拽
          draggable: false,
          cursor: "move",
          zIndex: 60,
          // 设置拖拽效果
          raiseOnDrag: true,
        });
        marker.setMap(self.amap);
        marker.on("click", (marker) => {
          console.log(marker, 1111);
          self.item = list[V];
          self.openPopup();
        });
      });
    },
    openPopup() {
      setTimeout(() => {
        this.detailShow = true;
      }, 100);
    },
    handleOk() {
      let self = this;
      self.backPrev({
        paramKey: "retailerSelectBack",
        param: self.item,
      });
    },
  },
};
</script>

<style scoped lang="scss">
uni-page-body {
  min-height: 100%;
  width: 100%;
  background-color: #f1f0f6;
}

.page {
  padding: 0;
}

.right-icon {
  padding: 0 25rpx;
  font-size: 30rpx;
  color: white;
}

#container {
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  /* #ifdef APP-PLUS */
  height: calc(100vh - 44 - var(--status-bar-height));
  margin-top: calc(44 + var(--status-bar-height));
  /* #endif */
}

.cur-loc {
  position: absolute;
  bottom: 50px;
  left: 15px;
  padding: 5px;
  background: #fff;
  width: 35px;
  height: 35px;
  box-shadow: 0px 0px 0px 1px #ddd;
}

.bottom-main {
  width: 100%;
  height: 100%;
  padding: 15px;
  position: relative;
}

.title {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 20px;
  text-align: center;
}

.msg-title {
  font-size: $cm_form_item_label_font_size;
  color: #717579;
  display: inline;
}

.msg-context {
  font-size: $cm_form_item_label_font_size;
  padding: 20rpx 0rpx;
  word-break: break-all;
}

.divided-line {
  margin: 0px 0px 20rpx 0px;
}

.divided-line::after {
  border-bottom: 2rpx solid #cccccc;
  content: "";
  width: 100%;
  opacity: 0.5;
  display: block;
}
</style>
